

import React, { Component } from 'react';
import { BrowserRouter as History , HashRouter as Hash ,Routes,Route, Outlet , Navigate , Link ,NavLink , useNavigate ,useParams,useLocation  } from "react-router-dom" 


class RouterIndex extends Component {
    render() {
        return (
            <div>
                <h2>全面学习 React  react-router-dom@6</h2>
                <MyApp/>
            </div>
        );
    }
}

class MyApp extends Component{
    render(){
        return (
            <div>
                <h2>项目的主视图 - MyApp</h2>
                <MainRouter></MainRouter>
                {/* <Hash>
                    <MainRouter></MainRouter>
                </Hash> */}
            </div>
        )
    }
}



class MainRouter extends Component{
    render(){
        return (
            // 只加载一个唯一的组件  谁在前面谁优先级高 
            <Hash>
                <Routes>
                    <Route path="/" element={ <AppMain/> } >
                        {/* 嵌套路由  */}
                        <Route path="/"  element={<Navigate replace to="/home" /> }  />
                        <Route path="/home" element={<Home /> }  /> 
                        <Route path="/mine" element={ <Mine />  } />
                        <Route path="/find/:time/:address"  element={ <Find/>  }/>
                        <Route path="/login"  element={ <Login />  }/>
                        <Route path="/changepass" element={<ChangePass/>} />
                        <Route path="/register"  element={ <Register  />  }/>
                        <Route path="/list/:type/:limit" element={<List/>  }/>

                        <Route path="/user"  element={ <User></User>  } >
                            <Route path="/user" element={<Navigate replace to="/user/list" />} />   
                            <Route path="/user/list" element={<UserList/>} />
                            <Route path="/user/add" element={<UserAdd/>}/>
                            <Route path="/user/fenxi" element={<UserFenxi/> } />
                        </Route>
                    </Route>

                    <Route path="/404" element={ <NotFound/>}  />
                    <Route path="/503" element={ <BadPage />}  />

                    <Route path="*" element={<Navigate replace to="/404" />} />
                </Routes>
            </Hash>
        )
    }
}

function User(){
    return (
        <div>
            <h2>用户管理</h2>
            <hr/>
            <div>
                <Outlet/>
            </div>
            <hr/>
            <p>
                <Link to="/user/add" >用户新增</Link>
                <Link to="/user/list" >用户列表 </Link>
                <Link to="/user/fenxi" >用户数据分析</Link>
            </p>
        </div>
    )
}
function UserAdd(){
    return (
        <div>
            <h2>用户新增</h2>
        </div>
    )
}
function UserList(){
    return (
        <div>
            <h2>用户列表</h2>
        </div>
    )
}
function UserFenxi(){
    return (
        <div>
            <h2>用户数据分析</h2>
        </div>
    )
}
class AppMain extends Component{
    render(){
        return (
            <div>
                <h2>AppMain - AppMain - AppMain</h2>
                <hr/>
                <div style={{width:'90%',minHeight:'400px',border:'1px solid deeppink',borderRadius:"10px"}}>
                    <Outlet></Outlet>
                </div>
                
                
                <div style={{width:'90%',height:'60px',border:'1px solid #999',borderRadius:"10px"}}>
                    <a href="#/home">首页0</a>
                    <NavLink to="/home?uid=2114&uname=zuozuomu"  > 首页</NavLink>
                    <NavLink to="/find/0323/东湖?who=liangzai" > 发现</NavLink>
                    <NavLink to="/login" > 登录</NavLink>
                    <NavLink to="/register" >注册 </NavLink>
                    <NavLink to="/changepass?username=zkl&phone=18012347865" >修改密码 </NavLink>
                    <NavLink to="/mine?token=wh2114daydayup" >个人中心 </NavLink>
                    <NavLink to="/list/鞋子/100" > 商品1</NavLink>
                    <NavLink to="/list/衬衣/280" > 商品2</NavLink>
                    <NavLink to="/user" > 用户</NavLink>

                </div>
            </div>
        )
    }
}

function Home(props){
    console.log(props)
    const location  = useLocation()
    console.log(location)
    return (
        <div>
            <h2>Home - hOme - home </h2>
            <h2>uid --- {new URLSearchParams(location.search).get('uid') }</h2>
            <h2>uname --- {new URLSearchParams(location.search).get('uname') }</h2>

        </div>
    )
}

class Mine extends Component{
    render(){
        console.log(this)
        
        return (
            <div>
                <h2>Mine - Mine - Mine </h2>
            </div>
        )
    }
}

function Find(){
    const location = useLocation()
    const params = useParams()
    console.log(params)
    return (
        <div>
            <h2>FInd - Find - Find </h2>
            <h2>who --- {new URLSearchParams(location.search).get('who')}</h2>
            <h2>time === {params.time }</h2>
            <h2>address === {params.address }</h2>

        </div>
    )
}

function Login(){ 
    const navigate  = useNavigate()
    const gotowhere = (url)=>{
        navigate(url)
    }
    return (
        <div>
            <h2>Login - Login - Login </h2>
            <button onClick={ ()=> navigate(-1) }>返回上一级</button>
            <button onClick={ ()=> gotowhere('/home?uid=1&uname=huahua') }>首页</button>

            <button onClick={ ()=> gotowhere('/find/0404/回老家?who=我们') }>发现2</button>

        </div>
    )
}

function Register(){
    return (
        <div>
            <h2>Register - Register - Register </h2>
        </div>
    )
}

function List(){
    const params = useParams()
    return (
        <div>
            <h2> List  - List - List </h2>
            <h2>type === {params.type}</h2>
            <h2>limit  === {params.limit}</h2>

        </div>
    )
}

function NotFound(){
    return (
        <div>
            <h2>
            NotFound - NotFound - 404 
            </h2>
        </div>
    )
}

function BadPage(){
    return (
        <div>
            <h2>
            BadPage - BadPage - 503  
            </h2>
        </div>
    )
}

function ChangePass(){
    const location = useLocation()
    return (
        <div>
            <h2>ChangePass - ChangePass - 修改密码</h2>
            <h2>username --- {new URLSearchParams(location.search).get('username')}  </h2>
            <h2>phone --- {new URLSearchParams(location.search).get('phone')}  </h2>
        </div>
    )
}
export default RouterIndex;
